<script setup lang="ts">
import {useStore} from 'vuex'
import { useRouter } from 'vue-router'
import $api from '@/api'
import { watch,ref } from 'vue';
const $store=useStore(),$router=useRouter(),recordsCount=ref(0),favoritesCount=ref(0),integral=ref(0)
const orderTabs=[
  {
    name:'待付款',
    icon:'payment',
    value:1
  },{
    name:'已完成',
    icon:'receipt',
    value:2
  },{
    name:'全部订单',
    icon:'order',
    value:3
  }
]
function clickOrderTab(item){
  $router.push({
    path:'/orders/list',
    query:{
      status:item.value
    }
  })
}
//跳转浏览记录
function gotoHistory() {
  $router.push({
    path:'/goods/history'
  })
}
//跳转商品收藏
function gotoFavorites() {
  $router.push({
    path:'/goods/favorites'
  })
}
//跳转积分明细
function gotoIntegral() {
  $router.push({
    path:'/goods/integral'
  })
}
function getUser() {
  const {data}=$api.user.getUser()
  watch(data,(_data) =>{
    recordsCount.value=_data.records_count
    favoritesCount.value=_data.favorites_count
    integral.value=_data.integral
    $store.commit('user/setUser',{
      username:_data.username,
      token:_data.token[0],
      avatar:_data.avatar
    })
  })
}
getUser()
</script>

<template>
  <div
    w:bg="blue-gray-100"
  >
    <div
      w:bg="red-500"
      w:p="8"
      w:text="white"
    >
      <div
        w:flex="~ nowrap"
        w:align="items-center"
      >
        <img :src="$store.getters['user/getUser']('avatar')" v-if="$store.getters['user/getUser']('avatar')" 
          w:h="24"
        />
        <div class="iconfont icon-my" v-else
          w:text="8xl"
          w:flex="none"
        ></div>
        <div
          w:flex="1"
          w:m="x-8"
        >
          <div v-if="$store.getters['user/hasLogin']">{{$store.getters['user/getUser']('username')}}</div>
          <div v-else>
            <router-link to="/login">点击登录</router-link>
          </div>
        </div>
        <router-link to="/settings">
          <div class="iconfont icon-setting"
            w:flex="none"
          ></div>
        </router-link>
      </div>
      <div
        w:flex="~ wrap"
        w:justify="around"
        w:m="t-4"
      >
        <div @click="gotoIntegral"
          w:flex="~ col nowrap"
          w:align="items-center"
        >
          <div
            w:m="b-3"
          >{{integral}}</div>
          <div>积分</div>
        </div>
        <div @click="gotoFavorites"
          w:flex="~ col nowrap"
          w:align="items-center"
        >
          <div
            w:m="b-3"
          >{{favoritesCount}}</div>
          <div>商品收藏</div>
        </div>
        <div @click="gotoHistory"
          w:flex="~ col nowrap"
          w:align="items-center"
        >
          <div
            w:m="b-3"
          >{{recordsCount}}</div>
          <div>我的足迹</div>
        </div>
      </div>
    </div>
    <div
      w:flex="~ nowrap"
      w:justify="around"
      w:border="rounded-4xl"
      w:p="y-8"
      w:bg="white"
      w:m="-t-6"
    >
      <div v-for="(item,idx) in orderTabs" :key="idx" @click="clickOrderTab(item)"
        w:flex="~ col nowrap"
        w:align="items-center"
      >
        <div class="iconfont" :class="['icon-'+item.icon]"
          w:text="6xl"
          w:m="b-2"
        ></div>
        <div>{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>

<route>
{
  name: "my",
  meta: {
    roles: [],
    isTabBar: true
  }
}
</route>